<div class="layui-fluid">
    <div class="layui-breadcrumb jy-breadcrumb">

    </div>
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-list-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">SKU</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"   name="sku" placeholder="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作人</label>
                    <div class="layui-input-block">
                        <select name="operator" xm-select="operator" xm-select-search="/index/User/getUserByCnName"
                                xm-select-radio="">
                        </select>
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">操作时间</label>
                    <div class="layui-input-block layui-jy-datetime">
                        <input type="text" class="layui-input" id="date" name="creation_time" placeholder="">
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn search" lay-submit lay-filter="LAY-list-search">查询</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="LAY-list" lay-filter="LAY-list"></table>
            <!-- 行内工具 -->
            <script type="text/html" id="LAY-list-toolbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" href="javascript:;" lay-event="detail">查看详情</a>
            </script>
        </div>
    </div>
</div>
<style>
    .layui-layer.layui-layer-undefined{
        overflow: auto;
    }
</style>
<script type="text/html" id="subTableHtml">
    <table   class="layui-table">
        <thead>
        <tr>
            <th>字段名称</th>
            <th>变更前</th>
            <th>变更后</th>
        </tr>
        </thead>
        <tbody>
            {{#  for(var i in d.old){ }}
            <tr>
            <td>{{i}}</td>
            <td>{{d.old[i]}}</td>
            <td>{{d.new[i]}}</td>
            </tr>
            {{#  } }}
        </tbody>
    </table>
</script>
<script>
    layui.use(['admin', 'table', 'form', 'toolJ', 'formSelects', 'laydate','laytpl'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , laydate = layui.laydate
            , laytpl = layui.laytpl
            , formSelects = layui.formSelects
            , toolJ = layui.toolJ
            , form = layui.form;
        form.render(null, 'LAY-list-form');
        laydate.render({
            elem: '#date'
            , type: 'datetime'
            , range: true
        });
        formSelects.render();
        //用户管理
        table.render({
            elem: '#LAY-list'
            , url: '/index/Logrecord/index'
            , cellMinWidth: 80
            , cols: [[
                {field: 'id', title: 'ID', width: 100}
                , {field: 'sku', title: 'SKU'}
                , {field: 'skuName', title: 'SKU名称'}
                , {field: 'operator', title: '操作人'}
                , {field: 'creation_time', title: '操作时间'}
                , {title: '操作', align: 'center', width: 120, toolbar: '#LAY-list-toolbar'}
            ]]
            , page: true
            , limit: 15
            , text: {none: '暂无相关数据!'}
        });

        //监听行内操作
        table.on('tool(LAY-list)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'detail':
                    var getTpl = subTableHtml.innerHTML;
                    var that=$(this);
                    laytpl(getTpl).render(data, function (html) {
                        layer.open({
                            type: 5,
                            title: '查看详情',
                            shade: [0.5, '#000'],
                            offset: 'auto',
                            area: ["70%", "70%"],
                            shadeClose: true,
                            closeBtn: 1,
                            anim: 2,
                            content: html,
                            cancel: function () {
                            }
                        });


                    });
                    break;
            }
        })
    });
</script>